<template>

  <div class="data-screen-container" :class="{ fullscreen: isFullscreen }">
    <!-- 全屏控制按钮 -->
    <div class="fullscreen-btn" @click="toggleFullScreen">
      <el-icon><FullScreen v-if="!isFullscreen"/><Close v-else/></el-icon>
    </div>

    <!-- 头部区域 -->
    <header class="header">
      <dv-decoration-10 class="header-left-decoration" />
      <div class="header-center">
        <h1 class="main-title">教育大数据实时监控中心</h1>
        <dv-decoration-5 class="header-center-decoration" />
      </div>
      <dv-decoration-10 class="header-right-decoration" />

      <div class="header-info">
        <div class="time-info">
          <span class="current-time">{{ currentTime }}</span>
          <span class="current-date">{{ formatDate(new Date(), 'YYYY年MM月DD日') }}</span>
          <span class="current-week">{{ currentWeek }}</span>
        </div>
        <div class="system-info">
          <span>数据更新时间: {{ formatDate(lastUpdateTime, 'YYYY-MM-DD HH:mm:ss') }}</span>
          <span class="system-status">系统状态: <i class="status-dot"></i> 运行中</span>
        </div>
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="main-content">
      <!-- 左侧面板 -->
      <section class="left-panel">
        <!-- 核心指标卡片 -->
        <div class="panel-item core-indicators">
          <h2 class="panel-title">
            <dv-decoration-6 class="decoration" />
            <span>核心教育指标</span>
          </h2>
          <div class="indicators-wrapper">
            <dv-capsule-chart :config="capsuleConfig" class="capsule-chart" />
            <div class="number-cards">
              <div class="number-card" v-for="(item, index) in coreNumbers" :key="index">
                <div class="card-title">{{ item.title }}</div>
                <div class="card-number">{{ item.number.toLocaleString() }}</div>
                <div class="card-trend" :class="item.trend > 0 ? 'up' : 'down'">
                  <el-icon v-if="item.trend > 0"><CaretTop /></el-icon>
                  <el-icon v-else><CaretBottom /></el-icon>
                  {{ Math.abs(item.trend) }}%
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 学生分布 -->
        <div class="panel-item student-distribution">
          <h2 class="panel-title">
            <dv-decoration-6 class="decoration" />
            <span>学生分布</span>
          </h2>
          <div class="chart-wrapper">
            <div class="chart-item gender-ratio">
              <h3>性别比例</h3>
              <div class="gender-chart">
                <dv-water-level-pond :config="genderConfig" />
              </div>
              <div class="gender-legend">
                <div class="legend-item">
                  <span class="legend-color male"></span>
                  <span class="legend-text">男生</span>
                </div>
                <div class="legend-item">
                  <span class="legend-color female"></span>
                  <span class="legend-text">女生</span>
                </div>
              </div>
            </div>
            <div class="chart-item grade-distribution">
              <h3>年级分布</h3>
              <div ref="gradeChart" class="echarts-container"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 中央面板 -->
      <section class="center-panel">
        <div class="panel-item geo-distribution">
          <h2 class="panel-title">
            <dv-decoration-6 class="decoration"/>
            <span>校园分布热力</span>
          </h2>
          <div ref="heatmapChart" class="map-container"></div>
          <div class="map-overlay">
            <dv-border-box-7 :reverse="true">
              <div class="map-stat">
                <div class="map-stat-item" v-for="(item, index) in mapStats" :key="index">
                  <div class="stat-label">{{ item.label }}</div>
                  <div class="stat-value">{{ item.value.toLocaleString() }}</div>
                </div>
              </div>
            </dv-border-box-7>
          </div>
        </div>

        <!-- 系统活跃度 -->
        <div class="panel-item system-activity">
          <h2 class="panel-title">
            <dv-decoration-6 class="decoration" />
            <span>系统活跃度</span>
          </h2>
          <div ref="activityChart" class="echarts-container"></div>
        </div>
      </section>

      <!-- 右侧面板 -->
      <section class="right-panel">
        <!-- 教师资源分析 -->
        <div class="panel-item teacher-analysis">
          <h2 class="panel-title">
            <dv-decoration-6 class="decoration" />
            <span>教师资源分析</span>
          </h2>
          <div class="chart-wrapper">
            <div class="chart-item teacher-rank">
              <h3>职称结构</h3>
              <dv-active-ring-chart :config="teacherRankConfig" />
            </div>
            <div class="chart-item teacher-age">
              <h3>年龄结构</h3>
              <div ref="teacherAgeChart" class="echarts-container"></div>
            </div>
          </div>
        </div>

        <!-- 教学质量评估 -->
        <div class="panel-item teaching-quality">
          <h2 class="panel-title">
            <dv-decoration-6 class="decoration" />
            <span>教学质量评估</span>
          </h2>
          <div ref="qualityChart" class="radar-container"></div>
          <div class="quality-indicators">
            <div class="indicator-item" v-for="(item, index) in qualityIndicators" :key="index">
              <div class="indicator-label">{{ item.label }}</div>
              <dv-percent-pond :config="getPercentConfig(item.value)" class="percent-pond" />
              <div class="indicator-value">{{ item.value }}%</div>
            </div>
          </div>
        </div>

        <!-- 实时动态 -->
        <div class="panel-item realtime-dynamics">
          <h2 class="panel-title">
            <dv-decoration-6 class="decoration" />
            <span>实时动态</span>
          </h2>
          <dv-scroll-board :config="noticeConfig" />
        </div>
      </section>
    </main>

    <!-- 底部区域 -->
    <footer class="footer">
      <dv-decoration-3 class="footer-decoration" />
      <div class="footer-text">
        <span>Copyright © {{ new Date().getFullYear() }} 教育大数据监控平台</span>
        <span>数据更新频率: 5分钟/次</span>
      </div>
    </footer>

    <!-- 背景装饰 -->
    <div class="bg-decoration">
      <dv-decoration-4 class="bg-decoration-1" :reverse="true" />
      <dv-decoration-4 class="bg-decoration-2" />
      <dv-decoration-4 class="bg-decoration-3" :reverse="true" />
      <dv-decoration-4 class="bg-decoration-4" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { EventBus } from '../../utils/eventBus.js'
// 全屏控制
const isFullscreen = ref(false)
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
    isFullscreen.value = true
    EventBus.emit('toggle-header', false);
  } else {
    if (document.exitFullscreen()) {
      document.exitFullscreen()
      isFullscreen.value = false
      EventBus.emit('toggle-header', true);
    }
  }
}

// 时间相关
const currentTime = ref('')
const currentWeek = ref('')
const lastUpdateTime = ref(new Date(Date.now() - 5 * 60 * 1000)) // 5分钟前

// 日期格式化函数
const formatDate = (date, fmt) => {
  if (!date) return ''

  const options = {
    'Y+': date.getFullYear().toString(),
    'M+': (date.getMonth() + 1).toString().padStart(2, '0'),
    'D+': date.getDate().toString().padStart(2, '0'),
    'H+': date.getHours().toString().padStart(2, '0'),
    'm+': date.getMinutes().toString().padStart(2, '0'),
    's+': date.getSeconds().toString().padStart(2, '0')
  }

  let result = fmt
  for (const [key, value] of Object.entries(options)) {
    if (new RegExp(`(${key})`).test(result)) {
      result = result.replace(RegExp.$1, value)
    }
  }
  return result
}

const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', { hour12: false })

  const weekMap = ['日', '一', '二', '三', '四', '五', '六']
  currentWeek.value = `星期${weekMap[now.getDay()]}`
}

let timeInterval = null
onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)

  initCharts()
})

onUnmounted(() => {
  clearInterval(timeInterval)

  // 销毁图表实例
  charts.forEach(chart => {
    chart && chart.dispose()
  })
})

// 核心数据
const coreNumbers = ref([
  { title: '学校总数', number: 126, trend: 5.2 },
  { title: '学生总数', number: 158624, trend: 3.7 },
  { title: '教师总数', number: 12683, trend: 2.1 },
  { title: '在线应用数', number: 37, trend: 12.5 }
])

// 胶囊图配置
const capsuleConfig = {
  data: [
    { name: '小学', value: 276 },
    { name: '初中', value: 184 },
    { name: '高中', value: 96 },
    { name: '职业学校', value: 35 },
    { name: '特殊教育', value: 12 }
  ],
  colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c'],
  unit: '所'
}

// 性别比例配置
const genderConfig = {
  data: [55],
  shape: 'rect',
  colors: ['#00c0ff', '#3de7c9'],
  waveNum: 3
}

// 教师职称结构
const teacherRankConfig = {
  data: [
    { name: '高级职称', value: 35 },
    { name: '中级职称', value: 42 },
    { name: '初级职称', value: 18 },
    { name: '其他', value: 5 }
  ],
  color: ['#00c0ff', '#3de7c9', '#ffdb5c', '#2d8cf0'],
  lineWidth: 10
}

// 地图统计数据
const mapStats = ref([
  { label: '学区总数', value: 24 },
  { label: '重点学校', value: 18 },
  { label: '在建校区', value: 7 }
])

// 教学质量指标
const qualityIndicators = ref([
  { label: '教学达标率', value: 92 },
  { label: '优秀率', value: 75 },
  { label: '教师满意度', value: 89 },
  { label: '学生参与度', value: 86 }
])

// 生成百分比配置
const getPercentConfig = (value) => {
  return {
    value,
    colors: ['#3de7c9', 'rgba(61, 231, 201, 0.2)']
  }
}

// 通知公告配置
const noticeConfig = {
  header: ['类型', '内容', '时间'],
  data: [
    ['公告', '2024年春季招生工作即将开始', '10:25:36'],
    ['预警', '三年级(2)班缺勤率异常，请关注', '10:18:42'],
    ['活动', '校园科技文化节将于下周一启动', '09:56:11'],
    ['系统', '教师绩效评估系统已更新', '09:32:47'],
    ['公告', '关于开展第三次学生体质监测的通知', '09:15:20'],
    ['活动', '市级教学技能大赛报名进行中', '08:47:54'],
    ['预警', '高三(4)班近期成绩波动较大', '08:22:31'],
    ['系统', '学生信息管理系统已完成升级', '08:10:15']
  ],
  index: true,
  columnWidth: [80, 260, 110],
  align: ['center', 'left', 'center'],
  rowNum: 5,
  headerBGC: 'rgba(0, 80, 179, 0.6)',
  headerHeight: 45,
  oddRowBGC: 'rgba(0, 44, 81, 0.6)',
  evenRowBGC: 'rgba(1, 33, 76, 0.6)',
  carousel: 'page'
}

// 图表实例存储
const charts = []
const gradeChart = ref(null)
const activityChart = ref(null)
const teacherAgeChart = ref(null)
const qualityChart = ref(null)

// 地图配置
const mapConfig = {
  sourceData: [
    {
      name: '北京',
      value: 24
    },
    {
      name: '天津',
      value: 20
    },
    {
      name: '上海',
      value: 26
    },
    {
      name: '重庆',
      value: 18
    },
    {
      name: '河北',
      value: 16
    },
    {
      name: '河南',
      value: 22
    },
    {
      name: '云南',
      value: 15
    },
    {
      name: '辽宁',
      value: 19
    },
    {
      name: '黑龙江',
      value: 18
    },
    {
      name: '湖南',
      value: 23
    },
    {
      name: '安徽',
      value: 17
    },
    {
      name: '山东',
      value: 25
    },
    {
      name: '江苏',
      value: 28
    },
    {
      name: '浙江',
      value: 27
    },
    {
      name: '江西',
      value: 16
    },
    {
      name: '湖北',
      value: 22
    },
    {
      name: '广西',
      value: 14
    },
    {
      name: '甘肃',
      value: 12
    },
    {
      name: '山西',
      value: 15
    },
    {
      name: '陕西',
      value: 17
    },
    {
      name: '吉林',
      value: 14
    },
    {
      name: '福建',
      value: 21
    },
    {
      name: '贵州',
      value: 13
    },
    {
      name: '广东',
      value: 29
    },
    {
      name: '青海',
      value: 8
    },
    {
      name: '四川',
      value: 23
    },
    {
      name: '宁夏',
      value: 9
    },
    {
      name: '海南',
      value: 12
    },
    {
      name: '台湾',
      value: 16
    },
    {
      name: '香港',
      value: 15
    },
    {
      name: '澳门',
      value: 10
    },
    {
      name: '新疆',
      value: 11
    },
    {
      name: '内蒙古',
      value: 13
    },
    {
      name: '西藏',
      value: 7
    }
  ],
  bgImgUrl: './map.jpg',
  k: 0.5,
  colors: ['#0A2E5D', '#1D64CB', '#3FB4FF'],
  customMap: undefined
}

// 飞线配置
const flylineConfig = {
  points: [
    {
      name: '郑州',
      coordinate: [0.48, 0.35],
      halo: {
        show: true,
      },
      icon: {
        src: 'public/map/mapCenterPoint.png',
        width: 30,
        height: 30
      },
      text: {
        show: false
      }
    },
    {
      name: '新乡',
      coordinate: [0.52, 0.23]
    },
    {
      name: '焦作',
      coordinate: [0.43, 0.29]
    },
    {
      name: '开封',
      coordinate: [0.59, 0.35]
    },
    {
      name: '许昌',
      coordinate: [0.53, 0.47]
    },
    {
      name: '平顶山',
      coordinate: [0.45, 0.54]
    },
    {
      name: '洛阳',
      coordinate: [0.36, 0.38]
    },
    {
      name: '周口',
      coordinate: [0.62, 0.55],
      halo: {
        show: true,
        color: '#8378ea'
      }
    },
    {
      name: '漯河',
      coordinate: [0.56, 0.56]
    },
    {
      name: '南阳',
      coordinate: [0.37, 0.66],
      halo: {
        show: true,
        color: '#37a2da'
      }
    },
    {
      name: '信阳',
      coordinate: [0.55, 0.81]
    },
    {
      name: '驻马店',
      coordinate: [0.55, 0.67]
    },
    {
      name: '济源',
      coordinate: [0.37, 0.29]
    },
    {
      name: '三门峡',
      coordinate: [0.20, 0.36]
    },
    {
      name: '商丘',
      coordinate: [0.76, 0.41]
    },
    {
      name: '鹤壁',
      coordinate: [0.59, 0.18]
    },
    {
      name: '濮阳',
      coordinate: [0.68, 0.17]
    },
    {
      name: '安阳',
      coordinate: [0.59, 0.10]
    }
  ],
  lines: [
    {
      source: '新乡',
      target: '郑州'
    },
    {
      source: '焦作',
      target: '郑州'
    },
    {
      source: '开封',
      target: '郑州'
    },
    {
      source: '周口',
      target: '郑州',
      color: '#fb7293',
      width: 2
    },
    {
      source: '南阳',
      target: '郑州',
      color: '#fb7293',
      width: 2
    },
    {
      source: '济源',
      target: '郑州'
    },
    {
      source: '三门峡',
      target: '郑州'
    },
    {
      source: '商丘',
      target: '郑州'
    },
    {
      source: '鹤壁',
      target: '郑州'
    },
    {
      source: '濮阳',
      target: '郑州'
    },
    {
      source: '安阳',
      target: '郑州'
    },
    {
      source: '许昌',
      target: '南阳',
      color: '#37a2da'
    },
    {
      source: '平顶山',
      target: '南阳',
      color: '#37a2da'
    },
    {
      source: '洛阳',
      target: '南阳',
      color: '#37a2da'
    },
    {
      source: '驻马店',
      target: '周口',
      color: '#8378ea'
    },
    {
      source: '信阳',
      target: '周口',
      color: '#8378ea'
    },
    {
      source: '漯河',
      target: '周口',
      color: '#8378ea'
    }
  ],
  icon: {
    show: true,
    src: 'public/map/mapPoint.png'
  },
  text: {
    show: true,
  },
  k: 0.5,
  bgImgSrc: 'public/map/map.jpg'
}

// 初始化所有图表
const initCharts = () => {
  // 年级分布图
  const gradeInstance = echarts.init(gradeChart.value)
  charts.push(gradeInstance)
  gradeInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['一年级', '二年级', '三年级', '四年级', '五年级', '六年级'],
      axisLine: {
        lineStyle: { color: 'rgba(255, 255, 255, 0.5)' }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      name: '人数',
      nameTextStyle: {
        color: 'rgba(255, 255, 255, 0.8)'
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 12
      },
      splitLine: {
        lineStyle: { color: 'rgba(255, 255, 255, 0.1)' }
      }
    },
    series: [
      {
        name: '学生数',
        type: 'bar',
        data: [4280, 3890, 4120, 3750, 3920, 4050],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#00c0ff' },
            { offset: 1, color: '#3de7c9' }
          ])
        },
        barWidth: '40%',
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#3de7c9' },
              { offset: 1, color: '#00c0ff' }
            ])
          }
        }
      }
    ]
  })

  // 系统活跃度图
  const activityInstance = echarts.init(activityChart.value)
  charts.push(activityInstance)

  // 模拟一天24小时的系统活跃数据
  const hours = Array.from({ length: 24 }, (_, i) => `${i}:00`)
  const activityData = [120, 80, 60, 35, 20, 15, 30, 120, 200, 280, 340, 380, 320, 350, 300, 280, 250, 220, 180, 160, 140, 160, 180, 140]

  activityInstance.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: hours,
      axisLine: {
        lineStyle: { color: 'rgba(255, 255, 255, 0.5)' }
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 12,
        interval: 3
      }
    },
    yAxis: {
      type: 'value',
      name: '活跃用户',
      nameTextStyle: {
        color: 'rgba(255, 255, 255, 0.8)'
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        color: 'rgba(255, 255, 255, 0.8)',
        fontSize: 12
      },
      splitLine: {
        lineStyle: { color: 'rgba(255, 255, 255, 0.1)' }
      }
    },
    series: [{
      name: '活跃用户',
      type: 'line',
      smooth: true,
      symbol: 'circle',
      symbolSize: 8,
      showSymbol: false,
      lineStyle: {
        width: 4,
        color: '#3de7c9'
      },
      itemStyle: {
        color: '#00c0ff',
        borderColor: '#fff',
        borderWidth: 2
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: 'rgba(0, 192, 255, 0.8)' },
          { offset: 0.5, color: 'rgba(0, 192, 255, 0.3)' },
          { offset: 1, color: 'rgba(0, 192, 255, 0)' }
        ])
      },
      data: activityData
    }]
  })

  // 教师年龄结构
  const teacherAgeInstance = echarts.init(teacherAgeChart.value)
  charts.push(teacherAgeInstance)
  teacherAgeInstance.setOption({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      right: 10,
      top: 'center',
      textStyle: {
        color: 'rgba(255, 255, 255, 0.8)'
      }
    },
    series: [
      {
        name: '教师年龄',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: 'rgba(0, 0, 0, 0.1)',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 18,
            fontWeight: 'bold',
            color: 'rgba(255, 255, 255, 0.9)'
          },
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 15, name: '30岁以下' },
          { value: 35, name: '31-40岁' },
          { value: 30, name: '41-50岁' },
          { value: 20, name: '51岁以上' }
        ],
        color: ['#00c0ff', '#3de7c9', '#ffdb5c', '#2d8cf0']
      }
    ]
  })

  // 教学质量雷达图
  const qualityInstance = echarts.init(qualityChart.value)
  charts.push(qualityInstance)
  qualityInstance.setOption({
    radar: {
      indicator: [
        { name: '教学水平', max: 100 },
        { name: '科研能力', max: 100 },
        { name: '师德师风', max: 100 },
        { name: '育人成效', max: 100 },
        { name: '班级管理', max: 100 },
        { name: '家校协作', max: 100 }
      ],
      center: ['50%', '50%'],
      radius: '65%',
      splitNumber: 4,
      shape: 'circle',
      name: {
        textStyle: {
          color: 'rgba(255, 255, 255, 0.8)',
          fontSize: 12
        }
      },
      splitArea: {
        areaStyle: {
          color: ['rgba(0, 72, 149, 0.4)', 'rgba(0, 72, 149, 0.3)',
                  'rgba(0, 72, 149, 0.2)', 'rgba(0, 72, 149, 0.1)']
        }
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        }
      }
    },
    series: [{
      name: '教学质量评估',
      type: 'radar',
      emphasis: {
        lineStyle: {
          width: 4
        }
      },
      data: [
        {
          value: [85, 80, 92, 88, 86, 78],
          name: '平均水平',
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            width: 3,
            color: '#00c0ff'
          },
          areaStyle: {
            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
              { offset: 0, color: 'rgba(0, 192, 255, 0.7)' },
              { offset: 1, color: 'rgba(0, 192, 255, 0)' }
            ])
          }
        }
      ]
    }]
  })
}

// 监听窗口大小变化，调整图表尺寸
window.addEventListener('resize', () => {
  charts.forEach(chart => {
    chart && chart.resize()
  })
})
</script>

<style scoped>
.data-screen-container {
  width: 100%;
  background: linear-gradient(135deg, #0f2453 0%, #1e3a87 50%, #0f2453 100%);
  color: #fff;
  overflow: hidden;
  position: relative;
  font-family: 'Microsoft YaHei', Arial, sans-serif;
  padding: 15px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.fullscreen {
  z-index: 9999;
}

.fullscreen-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 100;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(0, 192, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.fullscreen-btn:hover {
  background-color: rgba(0, 192, 255, 0.6);
}

.fullscreen-btn i, .fullscreen-btn .el-icon {
  font-size: 24px;
  color: #fff;
}

/* 头部区域样式 */
.header {
  height: 80px;
  width: 100%;
  //position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.header-left-decoration, .header-right-decoration {
  width: 250px;
  height: 60px;
}

.header-center {
  text-align: center;
  position: relative;
  padding: 0 20px;
}

.main-title {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 2px;
  background: linear-gradient(to bottom, #ffffff, #7cb9ff);
  -webkit-background-clip: text;
  color: transparent;
  margin: 0;
  padding: 0;
  text-shadow: 0 0 15px rgba(0, 192, 255, 0.5);
}

.header-center-decoration {
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: -15px;
  left: 0;
}

.header-info {
  position: absolute;
  right: 70px;
  top: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 14px;
}

.time-info {
  margin-bottom: 5px;
}

.current-time {
  font-size: 24px;
  margin-right: 15px;
  font-weight: bold;
}

.system-status {
  position: relative;
  padding-left: 15px;
  margin-left: 15px;
}

.status-dot {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #3de7c9;
  box-shadow: 0 0 5px #3de7c9;
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* 主内容区域样式 */
.main-content {
  //max-height: calc(100vh - 180px);
  flex: 1;
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.left-panel, .right-panel {
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.center-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.panel-item {
  background-color: rgba(5, 33, 76, 0.8);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 192, 255, 0.1);
  backdrop-filter: blur(5px);
  padding: 15px;
  position: relative;
  overflow: hidden;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.panel-title {
  font-size: 18px;
  margin: 0 0 15px 0;
  display: flex;
  align-items: center;
  position: relative;
}

.decoration {
  width: 20px;
  height: 20px;
  margin-right: 8px;
}

/* 核心指标样式 */
.indicators-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.capsule-chart {
  height: 180px;
  margin-bottom: 20px;
}

.number-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.number-card {
  flex: 1;
  min-width: calc(50% - 15px);
  background-color: rgba(0, 44, 81, 0.6);
  border-radius: 6px;
  padding: 12px;
  text-align: center;
  transition: all 0.3s;
}

.number-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 192, 255, 0.3);
}

.card-title {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, 0.7);
}

.card-number {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #3de7c9;
}

.card-trend {
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 10px;
}

.card-trend.up {
  background-color: rgba(61, 231, 201, 0.2);
  color: #3de7c9;
}

.card-trend.down {
  background-color: rgba(255, 82, 82, 0.2);
  color: #ff5252;
}

.card-trend .el-icon {
  margin-right: 4px;
}

/* 图表通用样式 */
.chart-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.chart-item {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chart-item h3 {
  font-size: 16px;
  margin: 0 0 10px 0;
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
}

.echarts-container, .radar-container, .map-container {
  flex: 1;
  min-height: 200px;
}

/* 性别比例图样式 */
.gender-chart {
  height: 120px;
  margin-bottom: 10px;
}

.gender-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 15px;
  height: 8px;
  margin-right: 5px;
  border-radius: 2px;
}

.legend-color.male {
  background-color: #00c0ff;
}

.legend-color.female {
  background-color: #3de7c9;
}

/* 地图容器样式 */
.map-container {
  flex: 1;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.map-legends {
  position: absolute;
  bottom: 70px;
  left: 20px;
  background-color: rgba(0, 29, 57, 0.7);
  padding: 8px 12px;
  border-radius: 4px;
  display: flex;
  gap: 15px;
  z-index: 10;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.legend-color {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  border-radius: 2px;
}

.legend-color.school {
  background-color: #00c0ff;
}

.legend-color.resource {
  background-color: #3de7c9;
}

.legend-color.special {
  background-color: #ffdb5c;
}

/* 地图覆盖层样式 */
.map-overlay {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 180px;
  z-index: 10;
}

/* 地图覆盖层样式 */
.map-stat {
  padding: 10px;
}

.map-stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.stat-value {
  font-weight: bold;
  color: #3de7c9;
}

/* 指标项样式 */
.quality-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 15px;
}

.indicator-item {
  flex: 1;
  min-width: calc(50% - 10px);
  display: flex;
  align-items: center;
}

.indicator-label {
  width: 80px;
  text-align: right;
  margin-right: 8px;
  font-size: 12px;
}

.percent-pond {
  flex: 1;
}

.indicator-value {
  width: 40px;
  text-align: right;
  font-size: 12px;
  color: #3de7c9;
}

/* 底部区域样式 */
.footer {
  height: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

.footer-decoration {
  width: 100%;
  height: 5px;
  position: absolute;
  top: 0;
}

.footer-text {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 0 20px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* 背景装饰样式 */
.bg-decoration {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: -1;
}

.bg-decoration-1 {
  position: absolute;
  width: 300px;
  height: 50px;
  top: 20%;
  left: -150px;
  opacity: 0.3;
}

.bg-decoration-2 {
  position: absolute;
  width: 300px;
  height: 50px;
  top: 40%;
  right: -150px;
  opacity: 0.3;
}

.bg-decoration-3 {
  position: absolute;
  width: 300px;
  height: 50px;
  bottom: 30%;
  left: -150px;
  opacity: 0.3;
}

.bg-decoration-4 {
  position: absolute;
  width: 300px;
  height: 50px;
  bottom: 10%;
  right: -150px;
  opacity: 0.3;
}

/* 适配不同尺寸屏幕的响应式 */
@media screen and (max-width: 1600px) {
  .main-title {
    font-size: 30px;
  }

  .number-card {
    min-width: 100%;
  }

  .quality-indicators .indicator-item {
    min-width: 100%;
  }
}

@media screen and (max-width: 1366px) {
  .header {
    height: 60px;
  }

  .main-title {
    font-size: 26px;
  }

  .current-time {
    font-size: 20px;
  }

  .panel-title {
    font-size: 16px;
  }

  .card-number {
    font-size: 20px;
  }
}

/* 悬停动效 */
.panel-item:hover {
  box-shadow: 0 0 25px rgba(0, 192, 255, 0.3);
}

/* 数据更新时的动画效果 */
@keyframes dataUpdate {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.card-number {
  animation: dataUpdate 2s ease-in-out infinite;
  animation-play-state: paused;
}

.number-card:hover .card-number {
  animation-play-state: running;
}
</style>

